<template>
  <div>
    <div ref="barChart" :style="{ width: '400px', height: '300px' }"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts"
import { onMounted, ref } from "vue"
const barChart = ref<HTMLElement>()
const myChart1 = ref<any>()
// 绘制柱形图
const initBarEcharts = () => {
  myChart1.value = echarts.init(barChart.value!)
  myChart1.value.setOption({
    title: {
      text: "学习输出",
      x: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: ["输出量", "输入量"],
      orient: "vertical",
      right: 60,
      top: 20,
    },
    xAxis: {
      data: ["六月", "七月", "八月", "九月", "十月"],
    },
    yAxis: {},
    color: ["#c38bef", "#6dbcf7"],
    series: [
      {
        name: "输出量",
        type: "line",
        data: [2, 9, 6, 3, 1],
        smooth: true,
        label: {
          show: true,
          position: "top",
        },
      },
      {
        name: "输入量",
        type: "bar",
        data: [9, 18, 12, 9, 6],
        barWidth: "20",
        label: {
          show: true,
          position: "top",
        },
      },
    ],
  })
}
onMounted(() => {
  initBarEcharts()
})
</script>
